<template><v-chart :option="option"></v-chart></template>
<script setup>
import { computed } from 'vue'
import { useSearchStore } from '@/stores/search'
const weatherStore = useSearchStore()
const futureData = computed(() => weatherStore.futureWeatherData)
const option = computed(() => {
  if (!futureData.value || !futureData.value.length) return null
  return {
    xAxis: {
      type: 'category',
      show: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      left: 0,
      top: 30,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'line',
        data: futureData.value.map((item) => item.daytemp),
        smooth: true,
        label: {
          show: true,
          position: 'top', // 标签显示在点的上方
          formatter: '白{c}℃', // 默认格式化器，{c} 代表数据值
          color: '#fff',
          fontSize: 12,
        },
      },
      {
        type: 'line',
        data: futureData.value.map((item) => item.nighttemp),
        smooth: true,
        label: {
          show: true,
          position: 'top', // 标签显示在点的上方，也可以是 'bottom', 'left', 'right', 'inside'
          formatter: '晚{c}℃', // 默认格式化器，{c} 代表数据值
          color: '#fff',
          fontSize: 12,
        },
      },
    ],
  }
})
</script>
<style scoped>
.echarts {
  position: absolute;
  width: 860px;
  height: 230px;
}
</style>
